<!--来电弹窗界面-->
<template>
	<div>

		<el-row :gutter="24" style="padding: 0px;height: 100%;">
			<!--<object id="usbdll" name="usbdll" TYPE="application/x-itst-activex" WIDTH="0" HEIGHT="0" codebase="UsbPhonev1.ocx#version=0,0,0,1" clsid="{4CF8112F-57D5-474B-A4BC-70F72244BCD9}" event_OnPhoneKBDPress="OnPhoneKBDPressFunc" event_OnIncomingPhone="OnIncomingPhoneFunc" event_OnPhoneStateChange="OnPhoneStateChangeFunc" event_OnDeviceDetect="OnDeviceDetectFunc" align=center hspace=0 vspace=0>
															</object>-->
			<OBJECT id="UsbPhone" CLSID="{4CF8112F-57D5-474B-A4BC-70F72244BCD9}" TYPE="application/x-itst-activex" event_OnIncomingPhone="inCom" event_OnPhoneStateChange="StateChange" border=0 width=0 height=0></OBJECT>

			<el-col :xs="24" :sm="24" :md="24" :lg="24">
				<!--顶部导航 -->
				<el-menu theme="light" default-active="1" class="el-menu-demo" mode="horizontal" @select="readLoad" style="min-width:850px;background-color:#32B4CA;margin-bottom:0px;">
					<img style="width: 100px;height: 25px;float:left;padding:0 20px;margin-top:10px;" src="../assets/rh.png"></img>
					<el-menu-item :id="topItem.id" v-for="topItem of topNavs" :index="topItem.id">
						{{topItem.resName}}
					</el-menu-item>

					<div style="float: right;">
						<div style="float: right;">
							<!--下拉条 结束-->
							<el-select style="width: 140px;vertical-align: top;margin-top: 20px;" v-model="roleMsg" size='mini' placeholder="角色切换" clearable @change="switchRole">
								<el-option v-for="item in  roleMsgCombo" :label="item.rName" :value="item.id">
								</el-option>
							</el-select>
						</div>
						<div style="float: right;">
							<!--下拉条 开始-->
							<img src="../assets/rhgzq_download.png" @click="changeSize" style="width:30px ;margin-bottom: 16px;" />
							<el-menu style="display:inline-block;" :default-active="activeIndex" class="el-menu-demo" mode="horizontal">
								<el-submenu index="2" style="background: #32B4CA;">
									<template slot="title" style="background-color:#32B4CA;width:20px">欢迎：{{userXm}}</template>
									<el-menu-item index="2-1" class="genggai" v-on:click="editPass">更改密码</el-menu-item>
									<el-menu-item index="2-1" class="genggai" v-on:click="logOut">退出</el-menu-item>
								</el-submenu>
							</el-menu>
						</div>

					</div>

					<!--按钮结束-->
				</el-menu>
			</el-col>
			<!-- 左侧树状态菜单-->
			<img @click="hideshow" src="../assets/showhidebtn.png" style="width: 50px;position: fixed;left: 4px;bottom: 4px;z-index: 99999999!important;">
			<el-col v-if="showLeftTree" :lg="leftWidth" :md="leftWidth" :sm="leftWidth" style="padding-right: 0px!important;">
				<el-tree id="left" style="display: block;" :data="leftTreeData" :props="treepros" highlight-current accordion @node-click="handleNodeClick"></el-tree>
			</el-col>
			<el-col :sm="24 - leftWidth " :md="24 - leftWidth " :lg="24 - leftWidth " style="padding-left: 15px!important">
				<!-- 中心区域动态选项卡-->
				<el-tabs ref="tabs" :value="activeTab" @tab-click="tabClick" @tab-remove="tabRemove" style="padding: 5px;">
					<el-tab-pane style="padding: 5px;" v-for="(item,index) in tabS" :key.sync="item.id" :label.sync="item.title" :name.sync="item.name" :path.sync="item.path" :closable.sync="item.closable">
					</el-tab-pane>
					<router-view></router-view>
				</el-tabs>
			</el-col>
		</el-row>
		<!-- 修改密码-->
		<el-dialog title="修改密码" v-model="passFormShow" size="small">
			<el-form :model="passFormData" ref="passForm" :rules="passRule" label-width="120px">
				<el-form-item label="输入密码" required prop="newPass">
					<el-input size="small" v-model="passFormData.newPass"></el-input>
				</el-form-item>
				<el-form-item label="再次确认密码" required prop="confirmPass">
					<el-input size="small" v-model="passFormData.confirmPass"></el-input>
				</el-form-item>
			</el-form>
			<div slot="footer" class="dialog-footer">
				<el-button @click="passFormShow = false">取 消</el-button>
				<el-button type="primary" @click="savePass">提 交</el-button>
			</div>
		</el-dialog>
		<!--查询客户资料弹出窗-->
		<el-dialog title="客户来电" v-model="coustomerShow" size="large">

			<el-row :gutter="24">
				<el-col :span="24">
					<el-row :gutter="24">
						<el-col :span="24" style="text-align: right;">
							<el-button type="danger" size="small" v-on:click="addNewConcat" icon="plus">新增维护记录</el-button>
							<el-button type="primary" @click="addConcat">任务处理</el-button>
						</el-col>
						<el-col :span="24">
							<div class="table-d">
								<el-collapse v-model="activeNameh">
									<el-collapse-item title="任务列表" name="1">
										<el-table :data="taskGrid.dataList" @selection-change="handleSelectionChange" border style="height: 200px;overflow-y: scroll;">
											<el-table-column type="selection" width="60">
											</el-table-column>
											<el-table-column label="类别" width="150">
												<template scope="scope">
													<el-tag type="primary">{{scope.row.typeName}}</el-tag>
												</template>
											</el-table-column>
											<el-table-column label="日期" align="center" width="150">
												<template scope="scope">
													{{scope.row.expectDate}}
												</template>
											</el-table-column>

											<el-table-column prop="vin" label="车架号" width="240">
											</el-table-column>

											<el-table-column prop="plateNum" label="车牌号" width="140">
												<template scope="scope">
													<el-button type="text" v-on:click="plateNumQuery(scope.$index)"> {{scope.row.plateNum}}</el-button>
													<el-badge class="mark" :value="scope.row.cp" />
												</template>
											</el-table-column>
											<el-table-column prop="content" label="任务标题" width="260">
											</el-table-column>
											<el-table-column prop="status" label="任务状态" width="200" :formatter="statusFor">
											</el-table-column>
											<el-table-column prop="uname" label="处理人">
											</el-table-column>
											<!--<el-table-column label="操作" width="80" fixed="right">
																			<template scope="scope">
																				<el-tooltip class="item" effect="light" content="处理" placement="top">
																					<el-button type="primary" size="mini" class="iconfont icon-dingdan" @click.native.prevent="addConcat(scope.$index)"></el-button>
																				</el-tooltip>
																			</template>
																	</el-table-column>-->
										</el-table>
									</el-collapse-item>
								</el-collapse>
							</div>
						</el-col>
						<el-col :span="24">
							<div style="height: 1.5em;"></div>
						</el-col>
						<el-col :span="24">
							<div class="table-d">
								<el-collapse v-model="activeNamec">
									<el-collapse-item title="客户资料" name="1">
										<b>车辆标签:</b>
										<span v-for="item in tableData.CarTabel">
											<el-tag type="primary">
												{{item.label}}
											</el-tag>&nbsp;
										</span>
										<el-row :gutter="24">
											<el-col :span="24">
												<div style="height: 0.5em;"></div>
											</el-col>
										</el-row>

										<table width="100%" border="0" cellspacing="1" cellpadding="10" style="color:rgb(103,106,108);font-size: 10px;">
											<tr>
												<td width="15" rowspan="6">
													<b>{{tableData.CarInfo.dataList[0].plateNum}}
														<el-tag type="primary">本公司</el-tag>
														<br /> {{tableData.CarInfo.dataList[0].model}}
														<br/> 车辆年份：{{tableData.CarInfo.dataList[0].modelYear}} 颜色:{{tableData.CarInfo.dataList[0].color}}
													</b>
												</td>
												<td width="15">
													<b>VIN</b>
												</td>
												<td width="15">
													<b>发动机号</b>
												</td>
												<td width="15">
													<b>购车日期</b>
												</td>
												<td width="15">
													<b>销售顾问</b>
												</td>
											</tr>
											<tr>
												<td>{{tableData.CarInfo.dataList[0].vin}}</td>
												<td>{{tableData.CarInfo.dataList[0].engineNum}}</td>
												<td>{{buyDates}}</td>
												<td>{{tableData.CarInfo.dataList[0].saler}}</td>
											</tr>
											<tr>
												<td>
													<b>上牌日期</b>
												</td>
												<td>
													<b>保修开始日期</b>
												</td>
												<td>
													<b>第一次进场</b>
												</td>
												<td>
													<b>维修起始里程数</b>
												</td>
											</tr>
											<tr>
												<td>{{licenceDates}}</td>
												<td>{{guaranteeStartDates}}</td>
												<td>{{firstEnterDates}}</td>
												<td>{{tableData.CarInfo.dataList[0].maintainStartMile}}</td>
											</tr>
											<tr>
												<td>
													<b>最后行驶里程</b>
												</td>
												<td>
													<b>上次维修日期</b>
												</td>
												<td>
													<b>下次保养日期</b>
												</td>
												<td>
													<b>下次保养里程</b>
												</td>
											</tr>
											<tr>
												<td>{{tableData.CarInfo.dataList[0].endMile}}</td>
												<td>{{lastMaintainDates}}</td>
												<td>{{nextMaintainDates}}</td>
												<td>{{tableData.CarInfo.dataList[0].nextMaintainMile}}</td>
											</tr>
										</table>
									</el-collapse-item>
								</el-collapse>
							</div>
						</el-col>
						<el-col :span="24">
							<div style="height: 1.5em;"></div>
						</el-col>
						<el-col :span="24">
							<div class="table-d">
								<el-collapse v-model="activeNamecc">
									<el-collapse-item title="客户资料" name="1">
										<table width="100%" border="0" cellspacing="1" cellpadding="10" style="color:rgb(103,106,108);font-size: 10px;">
											<tr>
												<td width="15" colspan="3">
													<b>车主信息 {{tableData.CarInfo.dataList[0].ownerName}} {{tableData.CarInfo.dataList[0].senderGender}}[{{tableData.CarInfo.dataList[0].ownerProperty}}用车] [编码：{{tableData.CarInfo.dataList[0].ownerCode}}]</b>
												</td>

											</tr>
											<tr>
												<td>
													<b>车主资料</b>
												</td>
												<td>
													<b>联系人:{{tableData.CarInfo.dataList[0].ownerName}} {{tableData.CarInfo.dataList[0].senderGender}}</b>
												</td>
												<td>
													<b>送修人：{{tableData.CarInfo.dataList[0].manitainSender}} {{tableData.CarInfo.dataList[0].senderGender}}</b>
												</td>
											</tr>
											<tr>
												<td>出生日期：{{ownerBirthdays}}
													<br />联系方式：
													<el-tag type="primary">{{tableData.CarInfo.dataList[0].ownerTel}}</el-tag>
													<br />地址：{{tableData.CarInfo.dataList[0].ownerAddress}}
													<br />所在行业：{{tableData.CarInfo.dataList[0].ownerTrader}} 家庭月收入：{{tableData.CarInfo.dataList[0].ownerMonthIncome}} 婚姻状况：{{tableData.CarInfo.dataList[0].ownerMarry}} 学历：{{tableData.CarInfo.dataList[0].ownerEducation}}
												</td>
												<td>联系方式：
													<el-tag type="primary">{{tableData.CarInfo.dataList[0].contactTel}}</el-tag>
													<br />联系人地址：{{tableData.CarInfo.dataList[0].contactAddress}}</td>
												<td>联系方式：
													<br/>
													<el-tag type="primary">{{tableData.CarInfo.dataList[0].senderTel}}</el-tag>

												</td>
											</tr>
											<tr>
												<td colspan="3">
													<b>用户标签:
														<span v-for="item in tableData.CustomerTabel">
															<el-tag type="primary">
																{{item.label}}
															</el-tag>&nbsp;
														</span>
													</b>
												</td>

											</tr>
										</table>
									</el-collapse-item>
								</el-collapse>
							</div>
						</el-col>

						<el-col :span="24">
							<div style="height: 1.5em;"></div>
						</el-col>
						<el-col :span="24">
							<div class="table-d">
								<el-collapse v-model="activeNames">
									<el-collapse-item title="售后工单" name="1">
										<el-tag type="success">售后总产值:￥{{tableData.WorkOrderProperty.sum}}</el-tag>
										<el-tag type="success">一年内产值:￥{{tableData.WorkOrderProperty.sumOfYear}}</el-tag>
										<el-tag type="success">总进场次数:{{tableData.WorkOrderProperty.totalIn}}次</el-tag>
										<el-tag type="success">一年内进场次数:{{tableData.WorkOrderProperty.totalInYear}}次</el-tag>
										<el-tag type="warning">首次进厂时间:{{countTime(tableData.WorkOrderProperty.firstEnterDate)}}</el-tag>
										<el-row :gutter="24">
											<el-col :span="24">
												<div style="height: 0.5em;"></div>
											</el-col>
										</el-row>
										<el-table :data="tableData.CarAfterSale.dataList" style="width: 100%" @row-click="orderClick">
											<el-table-column type="expand">
												<template scope="props">
													<el-form label-position="left" inline class="demo-table-expand">
														<el-form-item label="收款金额">
															<span>{{ props.row.receiveAmount }}</span>
														</el-form-item>
														<el-form-item label="工单类别">
															<span>{{ props.row.type }}</span>
														</el-form-item>
														<el-form-item label="出厂里程">
															<span>{{ props.row.runMile }}</span>
														</el-form-item>
														<el-form-item label="竣工日期">
															<span>{{ countTime(props.row.finishDate) }}</span>
														</el-form-item>
														<el-form-item label="工单号">
															<span>{{ props.row.orderNum }}</span>
														</el-form-item>
														<el-form-item label="接待">
															<span>{{ props.row.receptor }}</span>
														</el-form-item>
														<el-form-item label="维修金额">
															<span>{{ props.row.maintainAmount }}</span>
														</el-form-item>
														<el-form-item label="开单日期">
															<span>{{countTime(props.row.openDate) }}</span>
														</el-form-item>
														<el-form-item label="预计交车时间">
															<span>{{countTime(props.row.expectDate) }}</span>
														</el-form-item>
														<el-form-item label="索赔单号">
															<span>{{ props.row.demandNum }}</span>
														</el-form-item>
														<el-form-item label="结算日期">
															<span>{{countTime(props.row.balanceDate)}}</span>
														</el-form-item>
														<el-form-item label="交车日期">
															<span>{{countTime(props.row.sendCarDate) }}</span>
														</el-form-item>
														<el-form-item label="结清日期">
															<span>{{countTime(props.row.clearDate) }}</span>
														</el-form-item>
														<el-form-item label="车牌号">
															<span>{{ props.row.plateNum }}</span>
														</el-form-item>
														<el-form-item label="送修人">
															<span>{{ props.row.sender }}</span>
														</el-form-item>
														<el-form-item label="维修类别">
															<span>{{ props.row.maintainType }}</span>
														</el-form-item>
														<el-form-item label="状态">
															<span>{{ props.row.status }}</span>
														</el-form-item>
													</el-form>
												</template>
											</el-table-column>
											<el-table-column label="开单日期" prop="openDate" :formatter="openDates">
											</el-table-column>
											<el-table-column label="工单号" prop="orderNum">
											</el-table-column>
											<el-table-column label="工单状态" prop="orderStatus">
											</el-table-column>
											<el-table-column label="维修类别" prop="maintainType">
											</el-table-column>
											<el-table-column label="收款金额" prop="receiveAmount">
											</el-table-column>
											<el-table-column label="出厂里程" prop="runMile">
											</el-table-column>
										</el-table>
									</el-collapse-item>
								</el-collapse>
							</div>
						</el-col>
						<el-col :span="24">
							<div style="height: 1.5em;"></div>
						</el-col>
						<el-col :span="24">
							<!--维修工单的项目-->
							<div class="table-d">
								<el-collapse v-model="activeNamei">
									<el-collapse-item title="维修项目" name="1">
										<el-table :data="tableDataOrder.dataList" stripe border height="250">
											<el-table-column prop="orderType" label="工单类别">
											</el-table-column>
											<el-table-column prop="maintainType" label="维修类别">
											</el-table-column>
											<el-table-column prop="itemCode" label="项目代码">
											</el-table-column>
											<el-table-column prop="itemName" label="项目名称">
											</el-table-column>
											<el-table-column prop="totalFee" label="工时费">
											</el-table-column>
											<el-table-column prop="worker" label="技师">
											</el-table-column>
											<el-table-column prop="balanceCode" label="结算单号">
											</el-table-column>
											<el-table-column prop="workKind" label="工种">
											</el-table-column>
										</el-table>
									</el-collapse-item>
								</el-collapse>
							</div>
						</el-col>
						<el-col :span="24">
							<div style="height: 1.5em;"></div>
						</el-col>
						<el-col :span="24">
							<div class="table-d">
								<el-collapse v-model="activeName">
									<el-collapse-item title="延保记录" name="1">
										<table width="100%" border="0" cellspacing="1" cellpadding="10" style="color:rgb(103,106,108);font-size: 10px;">
											<tr>
												<td width="15">
													<b>合同开始</b>
												</td>
												<td width="15">
													<b>合同结束</b>
												</td>
												<td width="15">
													<b>延保类型</b>
												</td>
												<td width="15">
													<b>开始里程</b>
												</td>
												<td width="15">
													<b>截止里程</b>
												</td>
											</tr>
											<tr>
												<td>{{countTime(tableData.CarInfo.dataList[0].restartInsurance)}}</td>
												<td>{{countTime(tableData.CarInfo.dataList[0].restopInsurance)}}</td>
												<td>{{tableData.CarInfo.dataList[0].typeName}}</td>
												<td>{{tableData.CarInfo.dataList[0].startLegend}}</td>
												<td>{{tableData.CarInfo.dataList[0].stopLegend}}</td>
											</tr>
										</table>
									</el-collapse-item>
								</el-collapse>
							</div>
						</el-col>
						<el-col :span="24">
							<div style="height: 1.5em;"></div>
						</el-col>
						<el-col :span="24">
							<div class="table-d">
								<el-collapse v-model="activeNamea">
									<el-collapse-item title="合同" name="1">
										<table width="100%" border="0" cellspacing="1" cellpadding="10" style="color:rgb(103,106,108);font-size: 10px;">
											<tr>
												<td width="15" colspan="2">
													<b>交强险</b>
												</td>
												<td width="15" colspan="2">
													<b>商业险</b>
												</td>
												<td width="15" rowspan="2">
													<b>类型</b>
												</td>
											</tr>
											<tr>
												<td width="15">
													<b>合同号</b>
												</td>
												<td width="15">
													<b>起止日期</b>
												</td>
												<td width="15">
													<b>合同号</b>
												</td>
												<td width="15">
													<b>起止日期</b>
												</td>
											</tr>
											<tr>
												<td>{{tableData.CarInfo.dataList[0].compulsoryinsurancenum}}</td>
												<td>{{tableData.CarInfo.dataList[0].compulsoryStartDate}}</td>
												<td>{{tableData.CarInfo.dataList[0].commercialinsurancenum}}</td>
												<td>{{tableData.CarInfo.dataList[0].contractstartinsurance}}</td>
												<td></td>
											</tr>
										</table>
									</el-collapse-item>
								</el-collapse>
							</div>
						</el-col>
					</el-row>
				</el-col>

			</el-row>

		</el-dialog>
		<!--查询客户资料弹出窗结束-->
		<!-- 维系记录窗口-->
		<concat :rowData="rowData" :show="rowDataShow" v-if="rowDataShow" v-on:refresh="refresh"></concat>
		<el-dialog title="二维码" v-model="dialogShow" size="tiny">
			<div align="center">
				<img src="../assets/rhgzq_download.png" style="display:block;width:400px;height: 400px;" />
			</div>
		</el-dialog>
	</div>
</template>
<script>
module.exports = {
  computed: {
    //购车日期
    buyDates: function() {
      if (
        this.$data.tableData.CarInfo.dataList[0].buyDate == "" ||
        this.$data.tableData.CarInfo.dataList[0].buyDate == null
      )
        return "";
      return this.moment(
        Number(this.$data.tableData.CarInfo.dataList[0].buyDate)
      ).format("YYYY-MM-DD");
    },
    //上牌日期
    licenceDates: function() {
      if (
        this.$data.tableData.CarInfo.dataList[0].licenceDate == "" ||
        this.$data.tableData.CarInfo.dataList[0].licenceDate == null
      )
        return "";
      return this.moment(
        Number(this.$data.tableData.CarInfo.dataList[0].licenceDate)
      ).format("YYYY-MM-DD ");
    },
    //保修开始日期
    guaranteeStartDates: function() {
      if (
        this.$data.tableData.CarInfo.dataList[0].guaranteeStartDate == "" ||
        this.$data.tableData.CarInfo.dataList[0].guaranteeStartDate == null
      )
        return "";
      return this.moment(
        Number(this.$data.tableData.CarInfo.dataList[0].guaranteeStartDate)
      ).format("YYYY-MM-DD ");
    },
    //第一次进场
    firstEnterDates: function() {
      if (
        this.$data.tableData.CarInfo.dataList[0].firstEnterDate == "" ||
        this.$data.tableData.CarInfo.dataList[0].firstEnterDate == null
      )
        return "";
      return this.moment(
        Number(this.$data.tableData.CarInfo.dataList[0].firstEnterDate)
      ).format("YYYY-MM-DD ");
    },
    //上次维修日期
    lastMaintainDates: function() {
      if (
        this.$data.tableData.CarInfo.dataList[0].lastMaintainDate == "" ||
        this.$data.tableData.CarInfo.dataList[0].lastMaintainDate == null
      )
        return "";
      return this.moment(
        Number(this.$data.tableData.CarInfo.dataList[0].lastMaintainDate)
      ).format("YYYY-MM-DD ");
    },
    //下次保养日期
    nextMaintainDates: function() {
      if (
        this.$data.tableData.CarInfo.dataList[0].nextMaintainDate == "" ||
        this.$data.tableData.CarInfo.dataList[0].nextMaintainDate == null
      )
        return "";
      return this.moment(
        Number(this.$data.tableData.CarInfo.dataList[0].nextMaintainDate)
      ).format("YYYY-MM-DD ");
    },
    //车主生日
    ownerBirthdays: function() {
      if (
        this.$data.tableData.CarInfo.dataList[0].ownerBirthday == "" ||
        this.$data.tableData.CarInfo.dataList[0].ownerBirthday == null
      )
        return "";
      return this.moment(
        Number(this.$data.tableData.CarInfo.dataList[0].ownerBirthday)
      ).format("YYYY-MM-DD ");
    }
    /*---------------------------------------------------------------------------*/
  },
  // 基础数据配置
  data: function() {
    return {
      //二位码放大
      dialogShow: false,
      //复选框选择数据
      multipleSelection: [],
      //
      rowDataShow: false,
      //
      rowData: {},
      //任务表单数据
      taskGrid: {
        total: 0,
        dataList: []
      },
      //切换界面名字存储
      name: "worknav",
      //路由
      resPath: "",
      a: 0,
      //选择角色信息
      roleMsg: "",
      //角色信息
      roleMsgCombo: [],
      // 顶部区域导航菜单
      topNavs: [],
      // 左侧树形菜单
      leftTreeData: [],
      //定义：导航栏右侧 下拉菜单
      activeIndex: "",
      // 树选中高亮
      treepros: {
        label: "resName",
        children: "child"
      },
      // 中心区域 Tab 菜单
      tabS: [
        {
          id: "worknav",
          name: "worknav",
          title: "工作台",
          path: "",
          closable: false
        }
      ],
      activeTab: "worknav",
      userXm: window.localStorage.getItem("userName"),
      passFormShow: false,
      passFormData: {
        id: window.localStorage.getItem("uid"),
        newPass: "",
        confirmPass: ""
      },
      //组织表单较验规则
      passRule: {
        newPass: [
          {
            required: true,
            message: "请输入密码",
            trigger: "blur"
          }
        ],
        confirmPass: [
          {
            required: true,
            message: "请再次输入密码",
            trigger: "blur"
          }
        ]
      },

      //分组数据
      tableDataOrder: {
        total: 0,
        dataList: []
      },
      /*******查询客户相关数据↓*******/
      coustomerShow: false,
      //缩放属性
      //缩放属性
      activeNamec: ["1"],
      activeNamecc: ["1"],
      activeNameh: ["1"],
      activeNames: ["1"],
      activeName: ["1"],
      activeNamei: ["1"],
      activeNamea: ["1"],
      tableData: {
        CarInfo: {
          total: "",
          dataList: [
            {
              ownerMarry: "",
              color: "",
              concatGender: "",
              ownerCode: "",
              nextMaintainMile: "",
              ownerEducation: "",
              buyDate: "",
              typeName: "",
              saler: "",
              ownerTel: "",
              restartInsurance: "",
              contactTel: "",
              senderTel: "",
              restopInsurance: "",
              senderGender: "",
              guaranteeStartDate: "",
              ownerName: "",
              firstEnterDate: "",
              model: "",
              vin: "",
              contactAddress: "",
              compulsoryinsurancenum: "",
              brand: "",
              commercialinsurancenum: "",
              endMile: "",
              ownerBirthday: "",
              stopLegend: "",
              lastMaintainDate: "",
              contactName: "",
              engineNum: "",
              ownerGender: "",
              ownerMonthIncome: "",
              licenceDate: "",
              configure: "",
              ownerProperty: "",
              plateNum: "",
              modelYear: "",
              manitainSender: "",
              contractstartinsurance: "",
              compulsoryStartDate: "",
              startLegend: "",
              ownerAddress: "",
              ownerTrader: "",
              nextMaintainDate: "",
              maintainStartMile: ""
            }
          ]
        },
        CarAfterSale: {
          total: "",
          dataList: []
        },
        WorkOrderProperty: {
          sum: "",
          sumOfYear: "",
          totalIn: "",
          totalInYear: "",
          firstEnterDate: ""
        }
      },
      /*******查询客户相关数据↑*******/
      showLeftTree: true,
      leftWidth: 4
    };
  },
  mounted: function() {
    var vue = this;
    window.inCom = function(id, tel) {
      //			alert('0999');
      //vue.$message(tel);
      vue.coustomerShows(tel);
    };
    window.StateChange = function(id, state) {
      vue.stateChang(state);
    };
    var usbdll = document.getElementById("UsbPhone");
    usbdll.Init();
  },
  methods: {
    changeSize: function() {
      this.$data.dialogShow = true;
    },
    /***************打开维系记录窗口新增****************/
    //		dbClick: function (row, event) {
    //			this.$data.rowDataShow = false;
    //			;
    //			if (row.status == 1 || row.status == 2) {
    //				this.$message.error("该活动已完成或已关闭！");
    //			} else {
    //				this.addConcat(row);
    //			}
    //		},
    //任务状态转换
    statusFor: function(row, column) {
      if (row.status == 1) {
        return "已完成";
      } else if (row.status == 2) {
        return "已关闭";
      } else {
        if (
          row.expectDate <
          this.moment(new Date().toISOString()).format("YYYY-MM-DD")
        ) {
          return "任务已过期，请尽快处理！";
        } else {
          return row.statusName;
        }
      }
    },
    //维系记录插件保存后的回调
    refresh: function() {
      this.tableQuery();
    },
    addConcat: function() {
      if (this.$data.multipleSelection.length > 0) {
        this.$data.rowDataShow = true;
        this.$data.rowData = this.$data.multipleSelection;
      } else {
        this.$message.error("请选择数据！");
      }
    },
    addNewConcat: function() {
      debugger;
      this.$data.rowDataShow = false;
      this.$data.rowData = {};
      this.$data.rowData = this.$data.tableData.CarInfo.dataList[0];
      this.$data.rowDataShow = true;
    },
    
    //角色切换
    switchRole: function() {
      if (this.$data.name == "worknav") {
        this.$http({
          method: "GET",
          url: this.API_ROOT + "/crm/role/template",
          params: {
            roleId: this.$data.roleMsg
          }
        }).then(
          function(resp) {
            //success
            this.$data.tabS[0].path = resp.data.data.templateRoute;
            if (this.$data.tabS[0].path == undefined) {
              this.$data.tabS[0].path = "worknav/welcomeCom";
              this.$router.replace("/main/" + this.$data.tabS[0].path);
            } else {
              this.$router.replace("/main/" + this.$data.tabS[0].path);
            }
          },
          function(error) {
            // error
          }
        );
      } else {
        this.$http({
          method: "GET",
          url: this.API_ROOT + "/crm/role/template",
          params: {
            roleId: this.$data.roleMsg
          }
        }).then(
          function(resp) {
            //success
            this.$data.tabS[0].path = resp.data.data.templateRoute;
            if (this.$data.tabS[0].path == undefined) {
              this.$data.tabS[0].path = "worknav/welcomeCom";
            } else {
            }
          },
          function(error) {
            // error
          }
        );
      }
    },
    stateChang: function(state) {
      if (state == 0) {
        //关闭录音
        var UsbPhone = document.getElementById("UsbPhone");
        //alert("eeee");
        var lAudioDeviceID = 0;
        //打开录音
        var a = UsbPhone.StopRecord(lAudioDeviceID);
        //alert(a);
      }
      //alert(state);
    },
    //			inconms:function(tel){
    //				vue.$message(tel);
    //			},
    /***************客户资料相关↓****************/
    coustomerShows: function(tel) {
      var UsbPhone = document.getElementById("UsbPhone");
      var lAudioDeviceID = 0;
      //alert(tel);
      this.conQuery(tel);
      //先关闭录音
      var a = UsbPhone.StopRecord(lAudioDeviceID);
      //开始录音

      var RFile = "D:\\u80\\" + tel + "_" + Number(new Date()) + ".wav";
      //alert(RFile);
      var b = UsbPhone.StartRecordFile(lAudioDeviceID, RFile, 1);
      //alert(a+b);
      //this.$data.coustomerShow = true;
    },
    countTime: function(val) {
      if (val == "" || val == null) return "";
      return this.moment(Number(val)).format("YYYY-MM-DD");
    },
    //购车日期
    openDates: function(row, column) {
      if (row.openDate == "" || row.openDate == null) return "";
      return this.moment(Number(row.openDate)).format("YYYY-MM-DD");
    },
    orderClick: function(row) {
      this.$http({
        method: "GET",
        url: this.API_ROOT + "/crm/workitem/page",
        params: {
          orderCode: row.orderNum,
          start: this.$data.CurentPage,
          limit: 20
        }
      }).then(
        function(resp) {
          //success
          resp.data.total = parseInt(resp.data.total);
          this.$data.tableDataOrder = resp.data;
        },
        function(error) {
          // error
        }
      );
    },
    //复选框
    handleSelectionChange: function(val) {
      this.$data.multipleSelection = val;
    },
    //查询
    conQuery: function(tel) {
      this.$http({
        method: "GET",
        url: this.API_ROOT + "/crm/car/page", //url
        params: {
          //发送的参数
          key: "3", //查询类别
          value: tel //查询内容
        }
      }).then(
        function(resp) {
          // es5写法
          //判断是否返回了数据
          if (resp.data.msg != "查询成功！") {
            alert("未查询到来电客户信息！" + tel);
            this.$data.coustomerShow = false;
          } else {
            this.$data.tableDataOrder = {
              total: 0,
              dataList: []
            };
            this.$message("客户来电：" + tel);
            this.$data.tableData = resp.data;
            if (this.$data.tableData.CarInfo != undefined) {
              //this.queryConcatGrid();
              //修改内容显示属性
              this.$data.coustomerShow = true;
            }
            debugger;
            this.$http({
              method: "GET",
              url: this.API_ROOT + "/crm/task/page", //url
              params: {
                //发送的参数
                title: this.tableData.CarInfo.dataList[0].plateNum,
                status: "0"
              }
            }).then(
              function(resp) {
                this.$data.taskGrid = resp.data;
              },
              function(error) {
                // error
                this.$message.error(resp.data.msg);
              }
            );
          }
        },
        function(error) {
          // error
          this.$message.error(resp.data.msg);
        }
      );
    },
    //表格数据查询
    tableQuery: function() {
      this.$http({
        method: "GET",
        url: this.API_ROOT + "/crm/task/page", //url
        params: {
          //发送的参数
          title: this.tableData.CarInfo.dataList[0].plateNum
        }
      }).then(
        function(resp) {
          this.$data.taskGrid = resp.data;
        },
        function(error) {
          // error
          this.$message.error(resp.data.msg);
        }
      );
    },
    /***************客户资料相关↑****************/
    //读取本地缓存
    readLoad: function(tab, event) {
      var arr = Array();
      var storage = window.localStorage;
      var str = storage.getItem("menu" + tab);
      arr = JSON.parse(str);
      if (arr == null) {
        this.handleSelect(tab, event);
      } else {
        this.$data.leftTreeData = arr;
      }
    },
    // 顶部菜单导航
    handleSelect: function(tab, event) {
      // 加载左侧数
      var storage = window.localStorage;
      this.$http({
        method: "GET",
        url: this.API_ROOT + "/rbac/login/leftTree",
        params: {
          resId: tab
        }
      }).then(
        function(resp) {
          // es5写法
          this.$data.leftTreeData = resp.data.dataList;
          var arr = this.$data.leftTreeData;
          var str = JSON.stringify(arr);
          storage.setItem("menu" + tab, str);
          //				storage.obj = str;
          this.$data.leftWidth = 4;
          this.$data.showLeftTree = true;
        },
        function(error) {
          // error
        }
      );
    },

    loadNavTop: function() {
      this.$http({
        method: "GET",
        url: this.API_ROOT + "/rbac/login/subSys"
      }).then(
        function(resp) {
          // es5写法
          this.$data.topNavs = resp.data.dataList;
          for (var i = 0; i < this.$data.topNavs.length; i++) {
            var storage = window.localStorage;
            storage.removeItem("menu" + this.$data.topNavs[i].id);
          }
          if (this.$data.topNavs.length > 0) {
            var obj = resp.data.dataList[0];
            this.handleSelect(obj.id, [obj.id]);
          }
          // es6写法 .then()部分
          // .then(([toplist,alllist])=>({toplist,alllist}))
        },
        function(error) {
          // error
        }
      );
    },
    // 左侧菜单节点点击事件
    handleNodeClick: function(data) {
      // 只有叶子节点可以点击
      if (data && data.resType == "3") {
        if (null === data.resPath || "" === data.resPath) {
          this.$message("功能建设中，敬请期待！");
          return;
        }
        var tabData = {
          id: data.id,
          name: data.id,
          title: data.resName,
          path: data.resPath,
          closable: true
        };
        var item = this.$data.tabS.find(t => t.name == tabData.id);

        // 如已存在，激活选项卡
        if (item) {
          this.$data.activeTab = item.name;
          this.tabClick(item, null);
          return;
        }
        // tab页过多
        if (this.$data.tabS.length >= 8) {
          this.$message("您打开的选项卡过多，请先关闭一些！");
          return;
        }
        // 动态产生 Tab
        this.$data.tabS.push(tabData);
        this.$data.activeTab = tabData.name;
        // 路由切换
        this.$router.replace("/main/" + data.resPath);
        this.$data.name = data.name;
      } else {
        // 什么都不做
      }
      console.log(data);
    },
    tabClick: function(tab, event) {
      var item = this.$data.tabS.find(t => t.name == tab.name);
      if (item) {
        this.$router.replace("/main/" + item.path);
        this.$data.name = item.name;
        return;
      }
    },
    tabRemove: function(targetName) {
      //关闭标签
      let tabs = this.$data.tabS;
      let activeTab = this.$data.activeTab;
      let router = this.$router;
      if (targetName == activeTab) {
        tabs.forEach(function(tabItem, index) {
          if (tabItem.name == targetName) {
            let nextTab = tabs[index + 1] || tabs[index - 1];
            if (nextTab) {
              activeTab = nextTab.name;
              router.replace("/main/" + nextTab.path);
            }
          }
        });
      }
      this.$data.activeTab = activeTab;
      this.$data.tabS = tabs.filter(tab => tab.name !== targetName);
    },
    logOut: function() {
      this.$router.push("/login");
    },
    editPass: function() {
      this.$data.passFormData.newPass = "";
      this.$data.passFormData.confirmPass = "";
      this.$data.passFormData.id = window.localStorage.getItem("uid");
      this.$data.passFormShow = true;
    },
    hideshow: function() {
      if (this.$data.showLeftTree) {
        this.$data.leftWidth = 0;
      } else {
        this.$data.leftWidth = 4;
      }
      this.$data.showLeftTree = !this.$data.showLeftTree;
    },
    //保存密码
    savePass: function() {
      this.$refs.passForm.validate(
        function(valid) {
          if (valid) {
            var newPass = this.$data.passFormData.newPass;
            var confirmPass = this.$data.passFormData.confirmPass;
            var id = this.$data.passFormData.id;
            if (newPass != confirmPass) {
              this.$message.error("两次输入不一致，请重新输入！");
              return;
            }
            newPass = md5(newPass);

            this.$http({
              method: "POST",
              url: this.API_ROOT + "/rbac/user/savePass",
              params: {
                id: id,
                pass: newPass
              }
            }).then(
              function(resp) {
                if (resp.data.success) {
                  this.$message(resp.data.msg);
                  this.$data.passFormShow = false;
                } else {
                  this.$message.error(resp.data.msg);
                }
              },
              function(error) {
                // error
              }
            );
          }
          return false;
        }.bind(this)
      );
    }
  },
  created: function() {
    // 加载顶部导航
    this.loadNavTop();
    //获取用户角色
    this.$http
      .get(this.API_ROOT + "/rbac/role/roleDateList", {
        params: {}
      })
      .then(
        response => {
          this.$data.roleMsgCombo = response.data.data;
          this.$data.roleMsg = this.$data.roleMsgCombo[0].id;
          this.switchRole();
        },
        response => {}
      );

    // 去判断是否存在未导入工单
    this.$http
      .get(this.TASK_API + "/crm/imp/noImp", {
        params: {
          companyId: window.localStorage.getItem("companyId"),
          endDate: ""
        }
      })
      .then(
        response => {
          if (response.data.success) {
            var msg = response.data.msg;
            if (msg != "") {
              this.$notify({
                title: "您还未导入以下日期的工单",
                message: msg,
                duration: 0,
                type: "error",
                offset: 45
              });
            }
          }
        },
        response => {}
      );
  }
};
</script>
<style>
* {
  font-family: "微软雅黑";
  font-size: 12px;
}
/*2017-03-17 吴彦昭 更改 润华界面  WorkBenchCom.vue界面  */

.el-menu-item.is-active {
  color: #ffffff;
  font-weight: 200;
}
/*配置中心、保险代理、潜在客户等 按钮的文字颜色*/
/*配置中心、保险代理、潜在客户等 按钮的文字划过时候的效果*/

.el-menu-item,
.el-submenu__title {
  transition: border-color 0s, background-color 0s, color 0s !important;
}

.el-menu-item:hover {
  border-bottom: 5px solid !important;
  background-color: #32b4ca !important;
}
/*background-color:#20A0ff 配置中心、保险代理、潜在客户等 按钮的鼠标效果*/

.el-submenu__title {
  transition: 0 !important;
}

.el-submenu__title:hover {
  border-bottom: 0 !important;
  background-color: #32b4ca !important;
}
/*用户管理按钮鼠标移入*/

.genggai {
  color: #000 !important;
}

.genggai:hover {
  background: #fff !important;
  color: #000;
  border: 0 !important;
}
</style>